<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title>唯品会</title>
    <link rel="stylesheet"  href="css/index.css">
</head>
<body>
    <!--导航栏  -->
    <div class="nav">
        <div class="daohang">
            <span><a href="">河南
                <div id="tri"></div>
            </a>
            <div class="place">
                <div class="qing">
                <h3>请选择所在的收货地区</h3>
                <p><span>A</span>&#x3000;<span>安徽</span>&#x3000;<span>澳门</span></p>
                <p><span>H</span>&#x3000;<span>河北</span>&#x3000;<span>河南</span>&#x3000;<span>黑龙江</span></p>
                <p><span>J</span>&#x3000;<span>吉林</span>&#x3000;<span>江苏</span>&#x3000;<span>江西</span></p>
                </div>
            </div>
            </span>
            <ul class="log-in">
            <li class="first"><a href="">请登录&#x3000;/&#x3000;</a>
            <div class="nav-sub">
                    
                    <div class="nav-two"><a href="">
                    您好！[请登录]</a>
                    </div>
                    <ul>
                        <li><a href="">我的收藏</a></li>
                        <li><a href="">我的订单</a></li>
                        <li><a href="">零钱</a></li>
                        <li><a href="">我的优惠卷</a></li>
                        <li><a href="">我的唯品币</a></li>
                        <li><a href="">唯品金融</a></li>
                    </ul>
                </div>
                </li>
                <li><a href="">注册&#x3000;/&#x3000;</a></li>
                <li class="liwu-list"><a href=""><img src="img/header_sign.gif" alt="">签到有礼&#x3000;/&#x3000;</a>
                   <div class="liwu">
                       <div class="day">
                       <span ><img src="img/12.png" alt=""></span>
                       <div class="xian"></div>
                       <span ><img src="img/12.png" alt=""></span>
                       <div class="xian-one"></div>
                       <span ><img src="img/12.png" alt=""></span>
                       <div class="xian-two"></div>
                       <span ><img src="img/12.png" alt=""></span>
                       </div>
                    <div class="qiandao">
                        <p><a href="">每天签到送惊喜， 连续签到更享心动奖励 </a></p>
                        <button type="button">签到</button>
                    </div>
                   </div>
                </li>
                <li><a href="">我的订单&#x3000;&#x3000;/&#x3000;</a></li>
                <li class="two"><a href="">我的特卖&#x3000;&#x3000;/&#x3000;</a>
                <div id="tre"></div>
                <div class="buy">
                    <p><span><a href="">品牌收藏(0)</a></span></p>
                    <p><span><a href="">商品收藏(0)</a></span></p>
                    <p><span><a href="">我的足迹(1)</a></span></p>
                </div>
                </li>
                <li><a href="">会员俱乐部&#x3000;&#x3000;/&#x3000;</a>
                <div id="tru"></div>
                </li>
                <li><a href="">客户服务&#x3000;&#x3000;/&#x3000;</a>
                <div id="tre"></div>
                </li>
                 <li><img src="img/phone.png" alt=""></li>
                <li class="phone"><a href="">手机版&#x3000;/&#x3000;</a>
                <div class="phone-list">
                    <img src="img/6.jpg" alt="">
                    <div class="hanggao">
                    <p>随时逛 及时抢</p>
                    </div>
                </div>
                </li>
                <li class="more-list"><a href="">更多</a>
                <div id="trv"></div>
                <div class="more">
                    <section>
                      <h3>合作专区</h3>
                      <span>联名卡申请</span>
                      <span>唯品卡</span>
                      &#x3000;<span>支付专区</span>
                    </section>
                    <section>
                     <h3>关于我们</h3>
                     <span>Sell on vip</span>
                     <span>品牌招商</span>
                     <span>官方博客</span>
                    </section>
                </div>
                </li>
            </ul>
        </div>
    </div>
    <!--唯品会  -->
    <div class="weipin">
        <div class="left"><img src="img/1.png" alt=""></div>
        <div class="right">
        <section><img src="img/2.png" alt=""></section>
        <section><img src="img/3.png" alt=""></section>
        <section><img src="img/4.png" alt=""></section>
        <section><img src="" alt=""></section>
        </div>
    </div>
    <!--第二个导航条  -->
    <div class="index">
        <div class="index-one">
            <div class="index-two">
                <p class="index-color"><a href="">首页</a></p>
                <p ><a href="">唯品国际</a></p>
                <p ><a href="">母婴</a></p>
                <p ><a href="">家具家电</a></p>
                <p ><a href="">男士</a></p>
                <p ><a href="">美妆</a></p>
                <p ><a href="">生活超市</a></p>
                <p ><a href="">金融</a></p>
                <p class="gengduo"><a href="">更多</a>
                <div id="trb"></div>
                <div class="on-picture">
                    <div><img src="img/5.jpg" alt="">
                    <section class="op">女装</section></div>
                    
                    <div><img src="img/7.jpg" alt="">
                    <section class="op">鞋包</section></div>
                    
                    <div><img src="img/8.jpg" alt="">
                    <section class="op">配饰</section></div>
                    
                    <div><img src="img/9.jpg" alt="">
                    <section class="op">运动</section></div>
                    
                    <div><img src="img/10.jpg" alt="">
                    <section class="op">奢侈品</section></div>
                    
                </div>
                </p>
            </div>
            <div class="index-three">
                <li><img src="img/21.png" alt=""></li>
                <p><a href="">分类</a></p>
                <li><img src="img/22.png" alt=""></li>
                <p><a href="">预告</a></p>
            </div>
        </div>
    </div>
    <!--轮播图  -->
    <div class="lunbo">
        <img src="img/17.jpg" alt="">
        <div class="center">
            <div class="tp">
            <li class="current"><a href=""><img src="img/lunbo01.jpg" alt=""></a></li>
            <li><a href=""><img src="img/lunbo02.jpg" alt=""></a></li>
            <li><a href=""><img src="img/lunbo03.jpg" alt=""></a></li>
            <li><a href=""><img src="img/lunbo04.jpg" alt=""></a></li>
            </div>
        <div class="wz">
            <ul class="indicator">
                <li class="active"><a href="">时尚风暴 最高满199减40</a></li>
                <li><a href="">净水节 最高500元红包</a></li>
                <li><a href="">安莉芳集团 跨专场3件8折</a></li>
                <li><a href="">新人专享2重礼</a></li>
            </ul>
            <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
        </div>
        </div>
    </div>
    <!--最下面  -->
    <div class="leave">
        <section><a href=""><img src="img/00.png" alt=""></a></section>
        <section><a href=""><img src="img/01.png" alt=""></a></section>
        <section><a href=""><img src="img/02.png" alt=""></a></section>
    </div>
    <!--旁边黑框  -->
    <div class="sidebar">
        <ul class="side-list">
          <li class="zhanghao"></li>
        </ul>
    </div>
        
           

</body>
</html>
<script>
    var box = document.querySelector('.lunbo');
    var imgLis = document.querySelectorAll('.tp img');
    var indicatorLis = document.querySelectorAll('.indicator li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var index = 0;
      // 上一张
    function prevImg() {
        index = index==0 ? index=imgLis.length-1 : index-1;
        showImg();
    }
    // 下一张
    function nextImg() {
        index = index==imgLis.length-1 ? 0 : index+1;
        showImg();
    }
    // 展示图片
    function showImg(){
        for(var i = 0; i < imgLis.length; i++){
            imgLis[i].className = '';
            indicatorLis[i].className = '';
        }
        console.log(index);
        imgLis[index].className = 'current';
        indicatorLis[index].className = 'active';
    }

    // 1.自动切换图片
    var timer = setInterval(nextImg,1000);

    // 2.图片跟随指示灯切换
    for(var i = 0; i < indicatorLis.length; i++){
        indicatorLis[i].index = i;
        indicatorLis[i].onmouseover = function(){
            // 鼠标进来，暂停自动切换
            clearInterval(timer);
            timer = null;
            // 根据鼠标选中的指示灯的索引来切换图片
            // 并记录和更新 index 的值
            index = this.index;
            showImg();
        }
        indicatorLis[i].onmouseout = function(){
            // 鼠标出去，开始自动切换
            if(timer) return;
            // if (timer != null) {
            //     return;
            // }
            timer = setInterval(nextImg,1000);
        }
    }

    // 3.点击按钮切换
    box.onmouseover = function(){
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style.display = 'block';
    }
    box.onmouseout = function(){
        if(timer) return;
        timer = setInterval(nextImg,1000);
        prev.style.display = 'none';
        next.style.display = 'none';
    }
    // 点击 上一张
    prev.onclick = function(){
        prevImg();
    }
    // 点击 下一张
    next.onclick = function(){
        nextImg();
    }







</script>